<html>
    <head>
        <title>Itowns - Globe + color layers from vector data</title>

        <style type="text/css">
            .tooltip {
                display: none;
                background-image: linear-gradient(rgba(80, 80, 80,0.95), rgba(60, 60, 60,0.95));
                box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.5);
                margin-top: 20px;
                margin-left: 20px;
                padding: 10px;
                position: absolute;
                z-index: 1000;
                color: #CECECE;
                font-family: 'Open Sans', sans-serif;
                font-size: 14px;
                line-height: 18px;
                text-align: left;
            }
            .coord {
                font-size: 12px;
                padding-left:20px;
                color: #93B7C0;
                text-shadow: 0px 1px 0px rgba(200,200,200,.3), 0px -1px 0px rgba(30,30,30,.7);
            }
        </style>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/example.css">
        <link rel="stylesheet" type="text/css" href="css/loading_screen.css">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/GUI/dat.gui/dat.gui.min.js"></script>
    </head>
    <body>
        <div id="viewerDiv" class="viewer">
            <span id="tooltipDiv" class="tooltip"></span>
        </div>
        <script src="js/GUI/GuiTools.js"></script>
        <script src="../dist/itowns.js"></script>
        <script src="js/loading_screen.js"></script>
        <script src="js/FeatureToolTip.js"></script>
        <script type="text/javascript">
            // # Simple Globe viewer
            /* global itowns, setupLoadingScreen, GuiTools, ToolTip */

            // Define initial camera position
            var positionOnGlobe = { longitude: 3.5, latitude: 44, altitude: 1000000 };

            // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
            var viewerDiv = document.getElementById('viewerDiv');

            // Instanciate iTowns GlobeView*
            var view = new itowns.GlobeView(viewerDiv, positionOnGlobe);
            var menuGlobe = new GuiTools('menuDiv', view);

            setupLoadingScreen(viewerDiv, view);

            // Add one imagery layer to the scene
            // This layer is defined in a json file but it could be defined as a plain js
            // object. See Layer* for more info.
            itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(function _(config) {
                config.source = new itowns.WMTSSource(config.source);
                var layer = new itowns.ColorLayer('Ortho', config);
                view.addLayer(layer).then(function _() {
                    menuGlobe.addLayerGUI.bind(menuGlobe);
                    itowns.ColorLayersOrdering.moveLayerToIndex(view, 'Ortho', 0);
                });
            });
            // Add two elevation layers.
            // These will deform iTowns globe geometry to represent terrain elevation.
            function addElevationLayerFromConfig(config) {
                config.source = new itowns.WMTSSource(config.source);
                var layer = new itowns.ElevationLayer(config.id, config);
                view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
            }
            itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json').then(addElevationLayerFromConfig);
            itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);

            var promises = [];

            // Fetch, Parse and Convert by iTowns
            var kmlSource = new itowns.FileSource({
                url: 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/croquis.kml',
                projection: 'EPSG:4326',
                fetcher: itowns.Fetcher.xml,
                parser: itowns.KMLParser.parse,
            });

            var kmlLayer = new itowns.ColorLayer('Kml', {
                name: 'kml',
                transparent: true,
                source: kmlSource,
            });

            promises.push(view.addLayer(kmlLayer));

            // Parse and Convert by iTowns
            promises.push(itowns.Fetcher.xml('https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/ULTRA2009.gpx')
                .then(function _(gpx) {
                    var gpxSource = new itowns.FileSource({
                        fetchedData: gpx,
                        projection: 'EPSG:4326',
                        parser: itowns.GpxParser.parse,
                    });

                    var gpxLayer = new itowns.ColorLayer('Gpx', {
                        name: 'Ultra 2009',
                        transparent: true,
                        source: gpxSource,
                        style: {
                            stroke: 'red'
                        },
                    });

                    return view.addLayer(gpxLayer);
                }));

            // Convert by iTowns
            promises.push(itowns.Fetcher.json('https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/departements/09-ariege/departement-09-ariege.geojson')
                .then(function _(geojson) {
                    return itowns.GeoJsonParser.parse(geojson, {
                        buildExtent: true,
                        crsIn: 'EPSG:4326',
                        crsOut: view.tileLayer.extent.crs,
                        mergeFeatures: true,
                        withNormal: false,
                        withAltitude: false,
                    });
                }).then(function _(parsedData) {
                    var ariegeSource = new itowns.FileSource({
                        parsedData,
                    });

                    var ariegeLayer = new itowns.ColorLayer('ariege', {
                        name: 'ariege',
                        transparent: true,
                        style: {
                            fill: 'orange',
                            fillOpacity: 0.5,
                            stroke: 'white',
                        },
                        source: ariegeSource,
                    });

                    return view.addLayer(ariegeLayer);
                }));

            // Listen for globe full initialisation event
            view.addEventListener(itowns.VIEW_EVENTS.LAYERS_INITIALIZED, function _() {
                Promise.all(promises).then(new ToolTip(view,
                    document.getElementById('viewerDiv'),
                    document.getElementById('tooltipDiv')));
            });
        </script>
    </body>
</html>


